import 'dart:async';

import 'package:binggo_bomb/commons/Constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CardInfoWidget extends StatefulWidget {
  final String cardKey;
  final List nums;
  final int color;
  final Function onChang;
  const CardInfoWidget({super.key, required this.cardKey, required this.nums, required this.color, required this.onChang});

  @override
  State<CardInfoWidget> createState() => _CardInfoWidgetState();
}

class _CardInfoWidgetState extends State<CardInfoWidget> {

  late TextEditingController controller;
  int editIndex = 0;
  late Timer _timer;


  @override
  void initState() {
    super.initState();
    controller = TextEditingController();

    controller.addListener(() {
      if(controller.value.text.length >= 2) {
        goNextInput();
      }
    });
  }

  goNextInput() {
    setState(() {
      widget.nums[editIndex] = int.parse(controller.value.text.toString());
      editIndex = editIndex+1 < 25 ? editIndex+1 : 24;
    });
    _timer = Timer.periodic(const Duration(milliseconds: 300) , (timer){
      controller.clear();
      _timer.cancel();
    });

  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          // automaticallyImplyLeading: false,
          title: const Text('BingGo Card', style: TextStyle(color: Colors.black87),),
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          centerTitle: true,
          actions: <Widget>[
            IconButton(
                icon: const Icon(CupertinoIcons.checkmark_alt, color: Colors.black87,),
                tooltip: 'liked_widget_bloc',
                onPressed: () {
                  widget.onChang(widget.color, widget.cardKey, widget.nums,);
                  Navigator.of(context).pop();
                }),
          ],
        ),
        body: Center(
          child: Column(
            children: [
              Container(
                width: 260,
                height: 260,
                margin: EdgeInsets.only(top: 15, bottom: 15),
                child: Card(
                  color: Colors.black,
                  elevation: 4,
                  shape: RoundedRectangleBorder(),
                  child: Container(
                    margin: EdgeInsets.only(left: 2, top: 2,right: 2, bottom: 2),
                    child: GridView.count(
                      crossAxisCount: 5,
                      mainAxisSpacing: 2,
                      crossAxisSpacing: 2,
                      children: buildItem(widget.nums),
                    ),
                  ),
                ),
              ),

              TextField(
                keyboardType: TextInputType.phone,
                controller: controller,
              ),
            ],
          ),
        )
    );


  }

  List<Widget> buildItem(List ids) {
    List<Widget> listWidgets = [];

    for(int i = 0;i < ids.length; i++) {

      listWidgets.add(
          InkWell(
            child:
            Container(
              width: 20,
              height: 20,
              color: Constants.cardColors[widget.color],
              alignment: Alignment.center,
              child: Text( ids[i].toString(),
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 24,
                    fontWeight: FontWeight.bold
                ),
              ),
            ),

            onTap: () {
              setState(() {
                editIndex = i;
              });
            },
          )
      );
    }
    // cardNums.add(cardNum);
    return listWidgets;
  }

}
